<template>
    <div style="width:100%;height: 80vh;overflow: auto;">
        <el-tree highlight-current :autoExpandParent="false" check-on-click-node :data="treeData" @node-click="handleNodeClick"></el-tree>
    </div>
</template>
  
<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
        };
    },
    props: {
        noRoom: Boolean
    },
    components: {
    },
    computed: {
        ...mapState({
            allRooms: state => state.apartmentBuilding.allRooms,
        }),

        treeData() {
            let str = JSON.stringify(this.allRooms)
                .replace(/floorList/g, "children")
            if (!this.noRoom) {
                str = str.replace(/roomList/g, "children")
            }

            // .replace(/houseName/g, "label")
            // .replace(/floorNo/g, "label")
            // .replace(/roomNo/g, "label")
            let data = JSON.parse(str)

            const setName = (arr) => {
                if (!arr.length) {
                    return
                }
                arr.map(res => {
                    res.label = res.roomNo || res.floorNo || res.houseName
                    if (res.children) {
                        setName(res.children)
                    }
                })
            }
            setName(data)

            return data
            // return JSON.parse(str)
        }
    },

    async mounted() {
        await this.getAllRoom({
            pageSize:9999999,
            pageNo:1
        })
    },
    methods: {
        ...mapActions({
            getAllRoom: 'apartmentBuilding/allInfolist',
        }),
        // 选中 树列表后
        handleNodeClick(e) {
            this.$emit("treeDbClick", e)
        }

    },
};
</script>
  
<style scoped>
/* CSS样式 */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.building {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.floors {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 0 10px #ccc;
    border: 1px solid #ccc;
}

.floor {
    justify-content: space-around;
    display: flex;
}

.room {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    margin: 5px;
    line-height: 30px;
    font-size: 10px;
    cursor: pointer;
}

.room.occupied {
    background-color: #ffcccc;
}

.roof {
    width: 500px;
    margin: 0 auto;
    height: 30px;
    background-color: #888;
    text-align: center;
    color: #fff;
    line-height: 30px;
}

.floorText {
    margin: 0;
    font-size: 12px;
    margin-bottom: 5px;
}
</style>